<!-- 页面名称 -->
<template>
	<view class="page-qrcode">
		<cu-custom  bgColor="bgcolor-bar"  :isCustom="true" :isBack="true">
			<view slot="content" >我的推广码</view>
		</cu-custom>
		<image class="poster" @click="preview(poster.finalPath)" :src="poster.finalPath" mode="aspectFill"></image>
		<view class="save-btn" @click="saveImage">保存到本地</view>
		 <!-- 画布 -->
		 <view class="hideCanvasView">
		 	<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		 </view>
	</view>
</template>

<script>
	/*  文档地址：https://ext.dcloud.net.cn/plugin?id=471
		如果小程序有绘制微信用户头像需求的, 
		把https://thirdwx.qlogo.cn、https://wx.qlogo.cn
		都配置到小程序后台下载域名去
	*/
	import _app from '@/components/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/components/QS-SharePoster/QS-SharePoster.js';
	export default {
		 
		data() {
			return { 
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				bg:null,
				userInfo:{
					avatarUrl:"https://thirdwx.qlogo.cn/mmopen/vi_32/I2w03bzYKzS4lpb1ah2rmzickWfUtsgCPAwDNtVAUDOEHeogg6E1VOSJoXKRtyMuxsTM2ZLhT8eWK9x1YRpV9pQ/132",
					nickName:"一週の朋友"
				}
			}
		}, 
		onLoad(options) {
			this.options=options;
			
			if(this.globalData.userInfo!=undefined){
				this.userInfo=this.globalData.userInfo;  
			}
			this.shareFc();  
			//this.getInfo(); 
		}, 
		methods: { 
			preview(url){
				uni.previewImage({
					urls:[url]
				})
			},
			getInfo(){
				var _this=this;
				//获取二维码背景图配置
				
				this.$api.request({
					url:"/api/user/getQrcodeBg", 
					success:function(res){
						if(res.code==200||res.code==300){ 
							_this.bg=res.data; 
							_this.shareFc();
						}
					}
				})
			},
			async shareFc() {
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
							
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						background: {//背景色
							width: 720,
							height: 960,
							backgroundColor: '#FFC90E'
						},
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							/*
							
								所有元素位置与长处都是按百分比来计算的，
								bgObj为整个画布大小
							
							*/
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							var avatarUrl=(this.userInfo.avatarUrl!=undefined&&this.userInfo.avatarUrl!=null&&this.userInfo.avatarUrl.length>10)?this.userInfo.avatarUrl:null;
							var nickname=(this.userInfo.nickName!=undefined&&this.userInfo.nickName!=null&&this.userInfo.nickName.length>0)?this.userInfo.nickName:'';
							console.log(nickname)
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([ 
									{//头像
										type:'image', 
										dx:0.0347*bgObj.width, 
										dy:0.80434*bgObj.height,
										dWidth:0.15972*bgObj.width,
										dHeight:0.15972*bgObj.width,
										circleSet:true,
										url:avatarUrl,
										
									},
									{//昵称
										type:'text',
										dx:0.23777*bgObj.width,
										dy:0.8585*bgObj.height,
										size:fontSize,
										text:nickname 
										
									},
									// {//海报主图
									// 	type: 'image',
									// 	url:this.bg ,
									// 	alpha: 1,
									// 	dx:0,
									// 	dy: 0,
									// 	dWidth:bgObj.width,
									// 	dHeight:0.7208*bgObj.height,
									// },
									// {//二维码
									// 	type: 'image',
									// 	url:this.$config.url+"api/user/getQrcode" ,
									// 	alpha: 1, 
									// 	dx:0.7277*bgObj.width,
									// 	dy: 0.7746*bgObj.height,
									// 	dWidth:0.2402*bgObj.width,
									// 	dHeight:0.2402*bgObj.width, 
									// },
									 {//提示
									 	type:'text',
										size:fontSize*0.8,
									 	dx:0.31777*bgObj.width,
									 	dy:0.95375*bgObj.height,
										color:"#fff",
									 	text:"- 长按识别小程序码 -"  
									 },
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			
		}
	}
</script>

<style lang="scss">
	.page-qrcode{ 
		height: 100vh;
		background-color: #f2f2f2;
		.qrcode{
			width:600upx;
			height: 800upx;
			margin:100upx auto;
			display: block;
		}
	}
	.poster{
		width:100vw;height: 133.33vw;
		margin:0upx auto;
		display: block;
	}
	.hideCanvasView{
		position: fixed;
		left:-2000px;
		top:0;
	}
	.save-btn{
		margin:80upx auto;
		width:280upx;
		background-color: #fff;
		border-radius: 10upx;
		height: 80upx;line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color:#fff;
		background-color: #708FFF;
	}
	 
</style>
